<template>
  <CommonCard title="今日用户交易数" :value="reportData.userToday">
    <template #default>
      <v-chart :option="option"></v-chart>
    </template>
    <template #footer>
      <span>退货率</span>
      <span class="css-1">{{ reportData.returnRate }}%</span>
    </template>
  </CommonCard>
</template>

<script setup>
import { ref, watch } from 'vue';
import CommonCard from './CommonCard.vue';

const props = defineProps({
  reportData: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

const option = ref({});

const renderChart = data => {
  option.value = {
    tooltip: {
      //触发类型  'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      trigger: 'axis',
      // 坐标轴指示器 'shadow' 阴影指示器
      axisPointer: {
        type: 'shadow',
      },
    },

    xAxis: [
      {
        type: 'category',
        data: ['00:00', '03:00', '05:00', '07:00', '09:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00', '23:00'],
        show: false,
      },
    ],
    yAxis: [
      {
        type: 'value',
        show: false,
      },
    ],
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        name: '实时交易量',
        type: 'bar',
        data: data,
        //'barWidth'柱条的宽度，不设时自适应。
        barWidth: '60%',
      },
    ],
  };
};

watch(props, () => {
  renderChart(props.reportData.orderUserTrend);
});
</script>

<style scoped></style>
